<template>
     <div class="footer">
        <van-tabbar v-model="active" active-color="red">
        <van-tabbar-item icon="wap-home-o" url="#/">首页</van-tabbar-item>
        <van-tabbar-item icon="orders-o" url="#/types">分类</van-tabbar-item>
        <van-tabbar-item icon="video-o" url="#/videos">视频</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart-o" url="#/cart">购物车</van-tabbar-item>
        <van-tabbar-item icon="user-circle-o" url="#/my">我的</van-tabbar-item>
        </van-tabbar>
    </div>

</template>
<script>
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';

Vue.use(Tabbar);
Vue.use(TabbarItem);

export default {
  data() {
    return {
      // active: this.$store.state.active,
    }
  },
  computed:{
    active:{
      get(){
        return this.$store.state.active
      },
      set(val){
        this.$store.commit('changeActive',val)
      }
    }
  },
  methods:{

  }
}
</script>
<style>
.van-banner{
  margin: 0 10px;
  width: 95%;
}


</style>